<template>
  <div class="idcard">
     <header>
       <p><img src="../assets/img/left@2x.png" ></p>
       <p>证件验证</p>
       <p></p>
     </header>
     <form>
        <div class="searcher">
          <p><span>证件类型</span><img src="../assets/img/bottom.png"/></p>
          <p><input type="text" name=""></p>
        </div>
        <div class="card_type">
          <ul>
            <li class="checked">身份证号</li>
            <li>军官证</li>
            <li>营业执照</li>
          </ul>
        </div>


       <div class="btn"><input type="text" value="提交"></div>
     </form>
     
    
  </div>
</template>

<script>
export default {
  name: 'check_dress',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.idcard{
  height: 100%;
  /* background: #f2f2f2; */
  .font(26,#797979);
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  } 
  form {
    width: 92%;
    margin: auto;
    .searcher {
      .margin-top(40);
      display: flex;
      justify-content: space-between;
      p:nth-child(1){
        .border(1,solid,#ccc);
        .line-height(70);
        width: 34%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        img {
          .px2rem(height,14);
          .px2rem(width,23);
        }
      }
      p:nth-child(2){
        width: 60%;
        .border(1,solid,#ccc);
        .line-height(70);
        input {
          border: none;
          .margin-left(24);
        }
      }
    }
    .card_type {
      width: 34%;
      .margin-top(16);
      ul {
        li {
          .line-height(54);
          background: #fbfbfb;
          .border-bottom(1,solid,#e1e1e1);
          .padding-left(24);
          &.checked{
            .border-left(3,solid,#4aba80);
          }
          &:last-child{
            border-bottom: none;
          }
        }
      }
    }
    .btn {
      width: 100%;
      margin: auto;
      .margin-top(104);
      input {
        width: 100%;
        text-align: center;
        .px2rem(height,78);
        .font(32,#fff);
        /* background: #4aba80; */
        background: #ccc;
        border: none;
      }
    }
  }
}
</style>
